<template>
	<div>
		<section class="radio-strip" style="margin-top: 3rem;">
			<section class="radio-center">
				<mu-radio style="margin-left: 3%;" label="手动清理 " name="group" nativeValue="simple1" v-model="value" class="demo-radio" /> 
			</section>
			<section class="radio-center">
				<mu-radio style="margin-left: 3%;"  label="自动清理" name="group" nativeValue="simple2" v-model="value"  class="demo-radio"/> 
			</section>	
		</section>
		<section style="display: flex;justify-content: center;align-items: center;margin-top: 1.2rem;background-color: #fff; ">
			<section style="display: flex;flex-direction:column; height: 4rem; width: 94%; padding-bottom: 0.5rem;" class="center-mid">
				<span style="color:#2799f3 ;" @click="timerDone">一键清理</span>
				<mu-linear-progress mode="determinate" :value="valCache" style="margin-top: 0.8rem;"/>
			</section>
		</section>
		<!--<section class="btn-container" >-->
			<!--<span >{{valCache}}</span>-->
			<!--<mu-flat-button label="清理缓存" style="background-color: #2799f3; color: #fff;" @click="submitPop()"></mu-flat-button>-->
			
			<!--<mu-dialog :open="dialog" title="" @close="close">
			        请输入不少于20个字文字描述
			    <mu-flat-button slot="actions" @click="close" primary label="取消"/>
			    <mu-flat-button slot="actions" primary @click="close" label="确定"/>
		    </mu-dialog>-->
			
		<!--</section>-->
	</div>
</template>

<script>
	export default {
	  data () {
	    return {
	      value: 'simple2',
	      value2: '22',
	      disabled: 'tt',
	      valCache: 0
	    }
	  },
	  mounted () {
//	    this.timer = setInterval(() => {
//	      this.valCache += 10
//	      if (this.valCache > 100) this.valCache = 0
//	    }, 1000)
	  },
	  beforeDestroy () {
//	    clearInterval(this.timer)
//	    clearInterval(this.timerDone)
	  },
	  methods :{
	  	timerDone(){
	  		var that=this
	  		var stop=that.valCache
//	  		if(that.valCache<100){
//	  			setInterval(function(){
//		  			that.valCache += 30
//		  			
//		  		},1000)
//	  		}
//	  		console.info(that.valCache)
	  		
	  	},
	  	clearThis(){
	  		clearInterval(this.timerDone)
	  	}
	  },
	  watch :{
	  	valCache(newVal,oldVal){
	  		if (newVal> 100){
  				clearInterval(this.timerDone())
  				console.info(this.valCache)
  			} 
	  	}
	  }
	}
</script>

<style>
	.radio-strip{
		width:100%; 
		display:flex;
		flex-direction:column; 
		background-color: #fff !important;
		border-bottom: 1px solid #e4e4e4 ;
		padding: 0.6rem 0;
	}
	.radio-center{
		padding: 0.5rem 0;
		align-items: center; 
		display: flex;
	}
	.center-mid{
		justify-content: center;
		align-items: center;
	}
</style>